import { Row, Col, Form, Input, Select, Button, message, Image } from "antd";
import Password from "antd/lib/input/Password";
import TextArea from "antd/lib/input/TextArea";
import React, { FC, useRef, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import MyTitle from "../../components/Title";
import { roleList, xuekeList } from "../../utils";
import { ajax } from "./../../api/index";
import { useEffect } from "react";
// import { baseURL } from "../../api/request";
// import { UploadOutlined } from "@ant-design/icons";

import { inject, observer } from "mobx-react";

const { Option } = Select;
const XuekeSet: FC<any> = ({ data }) => {
  const [form] = Form.useForm();

  const Navigate = useNavigate();
  const file: any = useRef();
  const [path, setPath] = useState<any>("");
  const params = useParams();

  const onFinish = async (value: any) => {
    console.log(value);
    value._id = params.aid;
    let { code, result } = await ajax.updatexueke(value);
    if (code == 200) {
      Navigate("/main/jiaowu/list");
    }
  };
  useEffect(() => {
    ajax
      .getxuekeone({
        _id: params.aid,
      })
      .then((res) => {
        if (res.code == 200) {
          setPath(res.result.desc);
          form.setFieldsValue(res.result);
        }
      });
  }, []);
  const onFinishFailed = () => {
    message.error("请输入修改信息");
  };

  //   const uploadFile = async () => {
  //     const filedata = file.current.files[0];
  //     const data = new FormData();
  //     data.append("file", filedata);

  //     let res = await ajax.uploadfile(data);
  //     let { path } = res;
  //     if (res.code == 200) {
  //       setPath(res.path);
  //       form.setFieldsValue({ desc: res.path });
  //     }
  //   };

  //   const todoUpload = () => {
  //     file.current.click();
  //   };
  return (
    <div>
      <Row>
        <Col span={8}>
          <MyTitle text="学科修改" />
          <Form
            name="normal_login"
            className="myform"
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            form={form}
            layout={"vertical"}
          >
            <Form.Item
              name="title"
              label="学科名称"
              rules={[{ required: true, message: "请输入正确学科名" }]}
            >
              <Input placeholder="请输入学科名" />
            </Form.Item>
            <Form.Item
              name="content"
              label="学科简介"
              rules={[{ required: true, message: "请输入正确学科简介" }]}
            >
              <TextArea placeholder="学科简介" style={{ height: 150 }} />
            </Form.Item>
            <Form.Item
              name="lable"
              label="学科类别"
              rules={[{ required: true, message: "请输入正确学科类别" }]}
            >
              <Select style={{ width: "100%" }}>
                {xuekeList.map((l, i) => (
                  <Option key={i} value={l.value}>
                    {l.label}{" "}
                  </Option>
                ))}
              </Select>
            </Form.Item>
            {/* <Form.Item name="desc" label="学科图片">
              {path && (
                <Image
                  src={path.replace(/public/, baseURL)}
                  style={{ width: 200, height: 120, marginTop: 20 }}
                />
              )}
              <input
                type="file"
                ref={file}
                onChange={uploadFile}
                style={{ display: "none" }}
              />
              <Button
                style={{ display: "block", marginTop: 15 }}
                onClick={todoUpload}
                icon={<UploadOutlined />}
              >
                上传描述
              </Button>
            </Form.Item> */}
            <Form.Item>
              <Row>
                <Col span={11}>
                  <Button
                    type="primary"
                    style={{ width: "100%" }}
                    htmlType="submit"
                  >
                    修改学科信息
                  </Button>
                </Col>
              </Row>
            </Form.Item>
          </Form>
        </Col>
      </Row>
    </div>
  );
};

export default inject("data")(observer(XuekeSet));
